<template>
  <div v-if="!isNumber">
    <el-input v-model="inpValue" :placeholder="placeholder" :maxlength='max' :show-word-limit="showWordLimit"
      :type="type" clearable @change="updateValue" />
  </div>
  <div v-else>
    <el-input-number v-model="inpValue" :min="min" :max="max" controls-position="right" @change="updateValue" />
  </div>
</template>

<script setup>
import { ref, computed, watch, watchEffect } from 'vue'
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  type: {
    type: String,
    default: 'text'
  },
  isShowLengthLimit: {
    type: String,
    default: 'false'
  },
  placeholder: {
    type: String,
    default: '请输入内容'
  },
  min: {
    type: Number,
    default: null
  },
  max: {
    type: Number,
    default: null
  },
  isShowLength: {
    type: Boolean,
    default: false
  },
  modelValue: {
    type: Array,
    default: ''
  }
})
const inpValue = ref('')
const type = computed(() => props.type)
const showWordLimit = computed(() => props.isShowLength)
const placeholder = computed(() => props.placeholder)
const min = computed(() => props.min)
const max = computed(() => props.max)

const isNumber = computed(() => props.type === 'number')

watch(() => props.modelValue, (val) => {
  inpValue.value = val
}, {
  immediate: true
})

const updateValue = (val) => {
  emit('update:modelValue', val)
}

</script>

<style lang="scss" scoped></style>